import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import './06props.css'




class ComLife extends Component{
  constructor(props){
    super(props) //调用继承Component的构造函数
    this.state = {
      msg: 'helloword'
    }
    console.log("construtor构造函数");
  }

  componentWillMount(){
    console.log('componentWillMount将要渲染');
  }
  componentDidMount(){
    console.log(' componentDidMount组件渲染完毕');
  }
  componentWillReceiveProps(){
    console.log(' componentWillReceiveProps组件将要接受新的状态state和props');
  }
  shouldComponentUpdate(){
    //如果希望更新，就返回为真，不希望更新就返回false
    console.log('进行判断要不要更新');
    if(this.state.msg == 'helloword'){
      console.log(this.state.msg);
      return true
    }else{
      console.log(false);
      return false
    }
  }
  componentWillUpdate(){
    console.log('componentWillUpdate 组件将要更新');
  }
  componentDidUpdate(){
    console.log('componentDidUpdate 组件更新完毕');
  }
  componentWillUnmount(){
    console.log(' componentWillUnmount 组件移除');
  }



  render(){
    console.log('render渲染函数')
    return(
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.changeMsg}>组件更新</button>


      </div>
    )

  }
  changeMsg = () => {
    this.setState({
      msg: 'hello 老郑'
    })
  }

}

  class ParentCom extends Component{
    constructor(props){
      super(props)
      this.state = {
        isshow : true
      }
    }
    render(){
      if (this.state.isshow) {
          return (
            <div>
          <button onClick={this.removelife}>移除comlife</button>
          <ComLife/>
          </div>
          )
      }else{
        return <h1>将ComLife移除</h1>
      }

    }
    removelife= ()=> {
     this.setState({
      isshow: false
     })
    }
  }





  ReactDOM.render(
    <ParentCom /> ,
    document.querySelector('#root')
  )

    // console.log(new Date()); 不会初始化
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

